<template>
  <div class="app-container">
    <div class="dashboard-container">
      <div class="header">
        <h1>柜体使用率与订单时段统计看板</h1>
        <p>数据统计时间: {{ currentDate }}</p>
      </div>

      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-box"></i>
          </div>
          <div class="stat-info">
            <h3>柜体总数</h3>
            <div class="value">24</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon" style="background-color: #67c23a;">
            <i class="el-icon-data-line"></i>
          </div>
          <div class="stat-info">
            <h3>平均使用率</h3>
            <div class="value">68.2%</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon" style="background-color: #e6a23c;">
            <i class="el-icon-shopping-cart-2"></i>
          </div>
          <div class="stat-info">
            <h3>今日订单量</h3>
            <div class="value">326</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon" style="background-color: #f56c6c;">
            <i class="el-icon-alarm-clock"></i>
          </div>
          <div class="stat-info">
            <h3>高峰时段</h3>
            <div class="value">12:00-16:00</div>
          </div>
        </div>
      </div>

      <div class="charts-container">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>柜体使用率统计</span>
            <el-button type="text" icon="el-icon-download" @click="downloadChart('lineChart')"></el-button>
          </div>
          <div class="chart-wrapper" ref="lineChart"></div>
        </el-card>

        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>订单时段分布</span>
            <el-button type="text" icon="el-icon-download" @click="downloadChart('barChart')"></el-button>
          </div>
          <div class="chart-wrapper" ref="barChart"></div>
        </el-card>
      </div>

      <div class="footer">
        <p>数据更新时间: {{ currentTime }} | 统计系统 v1.0</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      currentDate: '',
      currentTime: '',
      lineChart: null,
      barChart: null,
      cabinetData: {
        names: ['柜体A001', '柜体A002', '柜体A003', '柜体B001', '柜体B002', '柜体B003', '柜体C001', '柜体C002'],
        usage: [78, 65, 92, 45, 83, 70, 58, 75]
      },
      orderData: {
        periods: ['00:00-04:00', '04:00-08:00', '08:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00'],
        counts: [42, 85, 156, 298, 224, 97]
      },
      timer: null
    };
  },
  mounted() {
    this.updateDateTime();
    this.timer = setInterval(this.updateDateTime, 1000);

    // 确保DOM完全渲染后初始化图表
    this.$nextTick(() => {
      this.initCharts();
    });

    // 添加响应式处理
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timer);
    // 移除事件监听
    window.removeEventListener('resize', this.handleResize);
    // 销毁图表实例
    if (this.lineChart) {
      this.lineChart.dispose();
    }
    if (this.barChart) {
      this.barChart.dispose();
    }
  },
  methods: {
    updateDateTime() {
      const now = new Date();
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
      this.currentTime = now.toLocaleTimeString('zh-CN');
    },
    initCharts() {
      // 初始化折线图 - 柜体使用率
      this.lineChart = echarts.init(this.$refs.lineChart);
      const lineOption = {
        color: ['#409eff'],
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.cabinetData.names,
          axisLine: {
            lineStyle: {
              color: '#dcdfe6'
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '使用率(%)',
          min: 0,
          max: 100,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#dcdfe6'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#ebeef5'
            }
          }
        },
        series: [
          {
            name: '柜体使用率',
            type: 'line',
            data: this.cabinetData.usage,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(64, 158, 255, 0.3)'
                }, {
                  offset: 1, color: 'rgba(64, 158, 255, 0.05)'
                }]
              }
            },
            markPoint: {
              data: [
                { type: 'max', name: '最高使用率' },
                { type: 'min', name: '最低使用率' }
              ]
            },
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      };
      this.lineChart.setOption(lineOption);

      // 初始化柱状图 - 订单时段分布
      this.barChart = echarts.init(this.$refs.barChart);
      const barOption = {
        color: ['#67c23a'],
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c} 单'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.orderData.periods,
          axisLine: {
            lineStyle: {
              color: '#dcdfe6'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '订单量(单)',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#dcdfe6'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#ebeef5'
            }
          }
        },
        series: [
          {
            name: '订单量',
            type: 'bar',
            barWidth: '60%',
            data: this.orderData.counts,
            itemStyle: {
              borderRadius: [5, 5, 0, 0]
            },
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      };
      this.barChart.setOption(barOption);
    },
    handleResize() {
      if (this.lineChart) {
        this.lineChart.resize();
      }
      if (this.barChart) {
        this.barChart.resize();
      }
    },
    downloadChart(chartType) {
      let chartInstance;
      if (chartType === 'lineChart') {
        chartInstance = this.lineChart;
      } else {
        chartInstance = this.barChart;
      }

      if (chartInstance) {
        const imgData = chartInstance.getDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: '#fff'
        });

        const link = document.createElement('a');
        link.href = imgData;
        link.download = `${chartType === 'lineChart' ? '柜体使用率统计' : '订单时段分布'}_${new Date().toISOString().slice(0, 10)}.png`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  border-top: 4px solid #409eff;

  h1 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 10px;
  }

  p {
    color: #7f8c8d;
    font-size: 1rem;
  }
}

.stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
}

.stat-card {
  flex: 1;
  min-width: 220px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-left: 4px solid #409eff;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: white;
  background: #409eff;
}

.stat-info {
  h3 {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 5px;
  }

  .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
  }
}

.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  flex: 1;
  min-width: 300px;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 0;
  }
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 1.2rem;
    color: #2c3e50;
    font-weight: 600;
  }
}

.chart-wrapper {
  width: 100%;
  height: 350px;
  padding: 15px;
}

.footer {
  text-align: center;
  padding: 20px;
  color: #7f8c8d;
  font-size: 0.85rem;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .charts-container {
    flex-direction: column;
  }

  .stat-card {
    min-width: 100%;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .chart-wrapper {
    height: 300px;
  }
}
</style>
